import SingleUpload from '../../../common/singleUpload'
import React from 'react'
import { Form, Input, Button,Icon } from 'antd';
import {inject, observer} from "mobx-react/index";
import Tip from "../../../common/tip"
const FormItem = Form.Item;
@inject("store")
@observer
class PersonalInfor extends React.Component {
    state = {
        confirmDirty: false,
    };
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.store.actions.getStatus()
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.store.actions.launchPersonInfo(values,this.props.toggle)
            }

        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    hasErrors = (fieldsError) => {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    getKey1 = (key)=>{
        this.props.store.personInfo.idCardFrontPath=key
    }
    getKey2 = (key)=>{
        this.props.store.personInfo.idCardReversePath=key
    }
    render() {
        const store=this.props.store
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                sm: {
                    span: 4,
                    offset: 4,
                },
            },
        };
        const nameError =  isFieldTouched('userName') &&getFieldError('userName');
        const addressError =  isFieldTouched('address') &&getFieldError('address');
        const emailError =  isFieldTouched('personEmail') &&getFieldError('personEmail');
        return (
            <div>
                <Tip title="个人认证"/>
                {store.validateStatus === "1" ?
                    <div className="check-div">
                        <Icon className="check-icon" type="hourglass"/>
                        <span className="check-span">审核中</span>
                    </div> : (
                    <div>
                        {store.validateStatus === "2" ?
                            <div>
                                <div style={{position:"relative",verticalAlign:"middle"}}>
                                    <span className="certifi-front">姓名</span>
                                    <span className="certifi-back">{store.personInfo.userName}</span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle"}}>
                                    <span className="certifi-front">地址</span>
                                    <span className="certifi-back">{store.personInfo.address}</span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle"}}>
                                    <span className="certifi-front">邮箱</span>
                                    <span className="certifi-back">{store.personInfo.personEmail}</span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle",marginBottom:"10px"}}>
                                    <span className="certifi-front">身份证正面照</span>
                                    <span className="certifi-back"><img className="certifi-img" src={store.personInfo.idFrontFinalPath}/></span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle",marginBottom:"10px"}}>
                                    <span className="certifi-front">身份证反面照</span>
                                    <span className="certifi-back"><img className="certifi-img" src={store.personInfo.idReverseFinalPath}/></span>
                                </div>
                                <div style={{position:"relative",verticalAlign:"middle",display:"none"}}>
                                    <span className="certifi-back"><Button type="primary" onClick={()=>store.validateStatus="3"}>修改信息</Button></span>
                                </div>
                            </div>:(
                            <div>{(store.validateStatus==="0"||(store.personInfo.userName!=undefined&&store.validateStatus==="3")||(store.personInfo.userName!=undefined&&store.validateStatus==="4"))?
                                <Form onSubmit={this.handleSubmit}>
                                    {store.validateStatus==="4"?<div>{store.corporationInfo.refuseReason}</div>:""}
                                    <FormItem
                                        {...formItemLayout}
                                        label="姓名"
                                        validateStatus={nameError ? 'error' : ''}
                                        help={nameError || ""}
                                    >
                                        {getFieldDecorator('userName', {
                                            initialValue:store.personInfo.userName,
                                            rules: [{required: true, message: '请输入姓名!'}],
                                        })(
                                            <Input onBlur={this.handleConfirmBlur}/>
                                        )}
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label="地址"
                                        validateStatus={addressError ? 'error' : ''}
                                        help={addressError || ""}
                                    >
                                        {getFieldDecorator('address', {
                                            initialValue:store.personInfo.address,
                                            rules: [{required: true, message: '请输入地址!'}],
                                        })(
                                            <Input onBlur={this.handleConfirmBlur}/>
                                        )}
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label="邮箱"
                                        validateStatus={emailError ? 'error' : ''}
                                        help={emailError || ""}
                                    >
                                        {getFieldDecorator('personEmail', {
                                            initialValue:store.personInfo.personEmail,
                                            rules: [{
                                                type: 'email', message: '这不是一个邮箱!',
                                            }, {required: true, message: '请输入邮箱!'}],
                                        })(
                                            <Input onBlur={this.handleConfirmBlur}/>
                                        )}
                                    </FormItem>
                                    <SingleUpload getKey={this.getKey1} finalPath={store.personInfo.idFrontFinalPath} alt={"身份证正面照:"}/>
                                    <SingleUpload getKey={this.getKey2} finalPath={store.personInfo.idReverseFinalPath} alt={"身份证反面照"}/>
                                    <FormItem {...tailFormItemLayout}>
                                        <Button size="large" type="primary" htmlType="submit"
                                                disabled={this.hasErrors(getFieldsError()) || store.personInfo.idCardFrontPath === undefined || store.personInfo.idCardReversePath === undefined}>{store.validateStatus==="0"?"立即认证":"提交修改"}</Button>
                                    </FormItem>
                                </Form>:""}
                            </div>)
                        }
                    </div>)
                }
            </div>
        );
    }
}
const PersonInfo = Form.create()(PersonalInfor);
export default PersonInfo